import Icon from '@/components/common/icon'
import Image from '@/components/common/image'
import Link from '@/components/common/link'
import { Card } from '@/components/layout/card-list'
import { getVideoDetailUrl } from '@/utils/build-url/news'
import { formatWithThousandsSeparator } from '@/utils/format/number'
import React from 'react'
import { AiFillEye, AiFillHeart } from 'react-icons/ai'
import { FaPlay } from 'react-icons/fa6'

export interface IVideoCardProps {
  id: number
  slug: string
  title: string
  coverUrl: string
  duration: string
  viewCount: number
  likeCount: number
}
interface Props {
  obj: IVideoCardProps
}
const VideoCard = ({obj: {id, title, coverUrl, duration, slug, viewCount, likeCount}}: Props) => { 
  return (
    <Card>
      <Link href={getVideoDetailUrl({language: 'zh', video: slug})}>
        <div className='relative'>
          <Image className='' src={coverUrl} alt={title} />
          {/* 视频时长 */}
          <div className='absolute right-card-gap-x md:right-card-gap-x-md bottom-card-gap-x md:bottom-card-gap-x-md flex items-center justify-center'>
            <span className='bg-black/50 !text-white px-2 py-1 rounded-full tip'>{duration}</span>
          </div>
          {/* 播放 icon */}
          <div className='absolute left-0 top-0 bottom-0 right-0 flex items-center justify-center w-[60px] h-[60px] bg-black/50 rounded-full m-auto pl-[4px] md:pl-[6px]'>
            <Icon icon={FaPlay} className='text-white w-[24px] md:w-[30px] h-[24px] md:h-[30px]' />
          </div>
        </div>
        <div className='p-content-gap-y md:p-content-gap-y-md space-y-content-gap-y md:space-y-content-gap-y-md'>
          <h3 className='line-clamp-2'>{title}</h3>
          <ul className='tip text-txt-secondary flex gap-content-gap-x md:gap-content-gap-x-md'>
            <li className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'><Icon icon={AiFillHeart} /> {formatWithThousandsSeparator(likeCount)}</li>
            <li className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'><Icon icon={AiFillEye} /> {formatWithThousandsSeparator(viewCount)}</li>
          </ul>
        </div>
      </Link>
    </Card>
  )
}

export default VideoCard